<template>
  <div class="edit_all" :class="{ 'edit_show': isShow }">
    <div class="edit_box">
      <div class="edit_top">
        <ul class="edit_tab">
          <li 
            v-for="(item, index) in list"
            :key="index"
            :class="[ curIndex === index ? 'active' : '' ]"
            @click="clickHandler(index)">
            <b>{{item.name}}</b>
          </li>
        </ul>
      </div>
      <div class="edit_b">
        <div class="edit_b_list"
          v-for="(item, index) in list"
          :key="item.idName"
          :class="{ active: curIndex === index }">
          <work-edit :id="item.idName" :index="index" v-if="item.idName === 'basicInfo'" :work-list="rList[0].project ? [rList[0].project] : [{ titleName: '', roleName: '', time: '' }]" @work-input="workInput" />
          <work-edit :id="item.idName" :index="index" v-if="item.idName === 'work'" :work-list="workList" @work-input="workInput" ref="workEle" />
          <work-edit :id="item.idName" :index="index" v-if="item.idName === 'project'" :work-list="workList1" @work-input="workInput" />
          
          <button v-if="item.idName === 'work'" class="resume-btn" @click="workAction('work')">新增一条 工作经验</button>
            
          <button v-if="item.idName === 'project'" class="resume-btn" @click="workAction('project')">新增一条 项目经验</button>
          <resume-edit v-if="item.idName === 'jineng' || item.idName === 'evaluate'"  :cur-id="item.idName" @inputValue="inputValue" :cur-index="0"/>  
          
        </div>
      </div>
      <div title="收起编辑区" class="close webfont webicon-jiantoudown" @click="isShow = !isShow"></div>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref, toRefs, reactive, onMounted, watch } from 'vue';

import workEdit from './workEdit.vue';
import resumeEdit from './EditAction.vue';
export default defineComponent({
  components: {
    workEdit, resumeEdit
  },
  props: {
    rList: {
      type: Array,
      default: [],
    },
  },
  setup(props, context) {
    let isShow = ref(false);
    const { name, rList } = props;
    const curIndex = ref(0);
    const workEle = ref(null);
    const data = reactive({
      list: [{ name: '基本信息', idName: 'basicInfo' },
        { name: '技能特长',  idName: 'jineng', title: '' },
        { name: '工作经验', idName: 'work' },
        { name: '项目经历', idName: 'project' },
      ],
      workList: [
        { titleName: '', roleName: '', time: '' }
      ],
      workList1: [
        { titleName: '', roleName: '', time: '' }
      ],
      workList2: [
      { titleName: '', roleName: '', time: '' }
      ],
      curIndex: 0,
    })
    watch(isShow, (value) => {
      context.emit('edit-show', value);
    });
    const clickHandler = (index) => {
      // console.log(item);
      // item.isCheck = !item.isCheck;
      curIndex.value = index;
      data.list.forEach(list => {
        list.isCheck = false;
      });
      data.list[index].isCheck = !data.list[index].isCheck;
    };

    const workAction = (type) => {
      const len = data.workList.length;
      // let indexs = data.workList[len - 1];
      
      data.curIndex ++;
      console.log(data.workList);
      if (type == 'work') {
        workEle.value[0].changeWork();
        data.workList.push({ titleName: '', roleName: '', time: '' });
      } else {
        workEle.value[0].changeProject();
        data.workList1.push({ titleName: '', roleName: '', time: '' });
      }
      
    };
    const workInput = (res) => {
      res = JSON.parse(res);
      let project;
      if (res[0].idName === 'basicInfo') {
        project = res[0];
        project.type = 'basicInfo';
        
      } else {
        project = res;
      }
      context.emit('input-action', project);
    };
    const inputValue = (value) => {
      // const project = {
      //   type: 'jineng',
      //   value,
      // };
      console.log(value);
      context.emit('input-action', project)
    };

    onMounted(() => {
      let resumeData = window.localStorage.getItem('RESUME_DATA');
      if (resumeData) {
        let resume = JSON.parse(resumeData).list;
        if (resume[2].project) data.workList = resume[2].project;
        if (resume[3].project) data.workList = resume[3].project;
      }
    });
    return { isShow, ...toRefs(data), clickHandler, workAction, workInput, inputValue, curIndex, workEle };
  },
})
</script>
<style>
  .edit_all {
    width: 100%;
    background-color: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    -webkit-box-shadow: 0 0 20px rgb(0 0 0 / 20%);
    box-shadow: 0 0 20px rgb(0 0 0 / 20%);
    -webkit-transition: all .3s ease-out 0s;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    z-index: 6;
  }
  .edit_b {
    min-height: 300px;
    padding-top: 15px;
  }
  .edit_all .edit_box {
    width: 1200px;
    margin: 0 auto;
  }
  .edit_all .edit_box .edit_top {
    height: 52px;
    border-bottom: 2px solid #ddd;
    background-color: #fff;
    position: relative;
    z-index: 2;
  }
  .edit_all .edit_box .close {
    color: #185abd;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 20px rgb(0 0 0 / 20%);
    box-shadow: 0 0 20px rgb(0 0 0 / 20%);
    position: absolute;
    left: 50%;
    top: -30px;
    z-index: 1;
    margin-left: -40px;
    background-color: #fff;
    cursor: pointer;
    text-align: center;
    line-height: 36px;
    font-size: 20px;
    -webkit-transition: all .2s ease-out 0s;
  }
  .edit_all .edit_box .close.animate {
    animation: btn_show 4s linear 0s normal none infinite;
  }
  @keyframes btn_show {
    56%, 66%, 74%, 80%, 100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    61% {
      -webkit-transform: translateY(-12px);
      transform: translateY(-12px);
    }
    70% {
      -webkit-transform: translateY(-6px);
      transform: translateY(-6px);
    }
    77% {
      -webkit-transform: translateY(-3px);
      transform: translateY(-3px);
    }
  }
  .edit_all .edit_box .edit_top {
    height: 52px;
    border-bottom: 2px solid #ddd;
    background-color: #fff;
    position: relative;
    z-index: 2;
  }
  .edit_all.edit_show {
    transform: translateY(0);
  }
  .edit_top .edit_tab li{
    float: left;
    padding: 0 11px 0 9px;
    padding-top: 20px;
    /* height: 52px; */
    width: 100px;
    border-bottom: 2px solid #ddd;
    cursor: pointer;
    position: relative;
  }
  .edit_top .edit_tab li b {
    display: block;
    text-align: center;
    line-height: 32px;
    font-size: 15px;
    color: #222;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .edit_top .edit_tab li.active b {
    color: #f60!important;
  }
  .edit_top .edit_tab li.active {
    border-bottom-color: #f60!important;
  }
  .edit_b_list {
    display: none;
    height: 280px;
    overflow-y: auto;
    /* padding-right: 22px; */
    padding-top: 5px;
  }
  .edit_b_list.active {
    display: block;
  }
  .resume-btn {
    margin: 10px 0;
    border-radius: 18px;
    color: #fff;
    background-color: #185abd !important;
    border-color: #185abd !important;
    display: block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    border-color: #dcdfe6;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    /* margin: 0; */
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 12px 20px;
    font-size: 14px;
  }
  .clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
  }
</style>
<style>
  .edit_b_list .edit_b_content:first-child {
    border: none;
    margin: 0;
    padding: 0;
  }
  .edit_b_list .edit_b_content {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #ddd;
  }
  .edit_has_sort {
    padding-right: 80px!important;
    position: relative;
  }
  .edit_b_list .info_hastime li:first-child {
    margin-left: 0;
  }
  .edit_b_list .info_hastime li {
    width: auto;
    margin-left: 20px;
  }
  .edit_b_list .info_list li {
    margin-bottom: 15px;
    float: left;
    width: 25%;
  }
  .edit_b_list .info_list li b {
    display: inline-block;
    vertical-align: top;
    min-width: 65px;
    line-height: 32px;
    text-align: right;
    padding-right: 10px;
    color: #333;
    font-size: 14px;
    font-weight: 400;
  }
  .edit_b .edit_b_list .input {
    border: none;
    width: 180px;
    background-color: #f3f4f6;
    border: 1px solid #f3f4f6;
    border-radius: 3px;
    height: 32px;
    line-height: 32px;
    font-size: 13px;
    color: #222;
  }
  .qm_editor {
    width: 1100px;
  }
  .qm_editor textarea {
    width: 100%;
    height: 200px;
  }
</style>